$(document).ready(function(){
	//parametros principales
	
	var contenidoHTML = '<p><center><h1>Choose your language</h1></center></p><p>&nbsp&nbsp&nbsp<img id="fr" src="<?php echo Dispatcher::baseUrl(); ?>/img/france.jpg"?> width="350" height="225" align="bottom" onmouseout="this.height=220; this.width=345" onmouseover="this.height=215; this.width=340" alt="" " />&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<img id="es" src="src="<?php echo Dispatcher::baseUrl(); ?>/img/espana.jpg"; ?>width="350" height="225" align="bottom" onmouseout="this.height=220; this.width=345" onmouseover="this.height=215; this.width=340" alt="" />&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<img id="en" src="src="<?php echo Dispatcher::baseUrl(); ?>/img/angleterre.jpg";?> width="350" height="225" align="bottom" onmouseout="this.height=220; this.width=345" onmouseover="this.height=215; this.width=340" alt=""/></p><span></span><p><button onclick=\"closeModal()\">Retour à la page d\'accueil</button></p>';
	
	
	
	var ancho = 1200; 
	var alto = 400;
	
	$('#button').click(function(){
	//function showModal(){
		// fondo transparente
		var bgdiv = $('<div>').attr({
					className: 'bgtransparent',
					id: 'bgtransparent'
					});

		$('body').append(bgdiv);
		
		var wscr = $(window).width();
		var hscr = $(window).height();
				
		$('#bgtransparent').css("width", wscr);
		$('#bgtransparent').css("height", hscr);
		
		
		// ventana flotante
		var moddiv = $('<div>').attr({
					className: 'bgmodal',
					id: 'bgmodal'
					});	
		
		$('body').append(moddiv);
		$('#bgmodal').append(contenidoHTML);
		$('img').click(function(){
			if($(this).attr('id') == 'fr')
				$('span').text("C'est du français, voici donc le mode d'emploi. Pour utiliser fleuron...");
			if($(this).attr('id') == 'es')
				$('span').text("Ese es el español, así que aquí están las instrucciones. Para utilizar fleuron ...");
			if($(this).attr('id') == 'en')
				$('span').text("It's English, here is the manual. To use fleuron ..");
			$('span').show();
		});
		$(window).resize();
	});

	$(window).resize(function(){
		// dimensiones de la ventana
		var wscr = $(window).width();
		var hscr = $(window).height();

		// estableciendo dimensiones de background
		$('#bgtransparent').css("width", wscr);
		$('#bgtransparent').css("height", hscr);
		
		// definiendo tama�o del contenedor
		$('#bgmodal').css("width", ancho+'px');
		$('#bgmodal').css("height", alto+'px');
		
		// obtiendo tama�o de contenedor
		var wcnt = $('#bgmodal').width();
		var hcnt = $('#bgmodal').height();
		
		// obtener posicion central
		var mleft = ( wscr - wcnt ) / 2;
		var mtop = ( hscr - hcnt ) / 2;
		
		// estableciendo posicion
		$('#bgmodal').css("left", mleft+'px');
		$('#bgmodal').css("top", mtop+'px');
	});
	
	$(window).keyup(function(event){
   		if (event.keyCode == 27) {
        	//falta implementar
   		}
	});
	
 });
	
function closeModal(){
	$('#bgmodal').remove();
	$('#bgtransparent').remove();
}

